import React, { FC, useEffect, useState } from 'react';
import { DatePicker, Form } from 'antd';
import { BankOutViewProps } from '../BankOutView'
import './index.css';
import locale from 'antd/es/date-picker/locale/zh_CN';

const { RangePicker } = DatePicker;
export type baseBankSearchProps = Omit<BankOutViewProps, 'title'>;
export interface searchListProps {
  param: string;
  type: "Input" | "DatePicker";
  ohters?: any;
  rules?: any[];
  [key: string]: any;
}
export interface bankSearchProps extends baseBankSearchProps {
  searchListParams: searchListProps[];
  dealName: string;
};

const useGetFetchList = (dealName: string) => {
  const [searchList, setSearchList] = useState([]);
  useEffect(() => {
    if (dealName === "Announcement") {
      const fetchListArr = ['serverDate', 'currencyList'];
      Promise.all([]).then((result: any) => {
        const _res = fetchListArr.map((k, i) => ({ [`${k}`]: result[i] }))
        // 获取对应数据
        setSearchList(_res as never[]);
      })
    }
  }, []);
  return [searchList, setSearchList];
}

type FieldType = Partial<Pick<searchListProps, 'param'>>;

const BankSearchView: FC<bankSearchProps> = (props) => {
  const { children, dealName, searchListParams, ...ohters } = props;
  const [searchList, setSearchList] = useGetFetchList(dealName);

  const onFinish = () => { }

  const onFinishFailed = () => { }
  console.log(searchList, setSearchList, searchListParams, 'ohters');
  return (
    <div className='search-view'>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="Username"
          // name="username"
          className='search-view-left'
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <RangePicker locale={locale} />
        </Form.Item>
      </Form>
      {children}
    </div>
  )
}

export {
  BankSearchView
};